---
import { getIsRtlFromUrl, getLanguageFromURL } from "../../languages";
import { fetchGithub } from "../../utils/fetchGithub";

let githubStars = 28000;

try {
  const fetchedStars = await fetchGithub(
    "https://api.github.com/repos/t3-oss/create-t3-app",
    {
      throwIfNoAuth: false,
      fetchType: "repo",
    },
  ).then((data) => data?.stargazers_count);

  githubStars = fetchedStars ?? 28000;
} catch (e) {
  console.error("unable to fetch from github", e);
}

const ONE_HOUR = 1 * 60 * 60;

Astro.response.headers.set("Cache-Control", `public, max-age=${ONE_HOUR}`);

const { pathname } = Astro.url;

const formattedStars = new Intl.NumberFormat(getLanguageFromURL(pathname), {
  notation: "compact",
}).format(githubStars);

const isRtl = getIsRtlFromUrl(pathname);
---

<a
  id="github-link"
  href="https://github.com/t3-oss/create-t3-app"
  class="group flex items-center gap-1 rounded-lg no-underline"
  aria-label="github repository link"
>
  <div
    id="github-star"
    class:list={[
      "relative hidden items-center rounded-lg border border-t3-purple-200/50 bg-t3-purple-200/50 bg-clip-padding px-2 py-1 text-slate-800 no-underline !transition-colors !duration-300 group-hover:border-t3-purple-200/75 group-hover:bg-t3-purple-200/75 md:flex ltr:mr-[.33em] rtl:ml-[.33em] dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:text-slate-100 dark:group-hover:border-t3-purple-200/50 dark:group-hover:bg-t3-purple-200/10",
      [
        /** triangle arrow */
        "after:absolute after:h-0 after:w-0 after:border-8 after:border-transparent after:transition-colors after:duration-300",
        isRtl &&
          "after:left-[calc(-0.5em-1px)] after:border-l-0 after:border-r-t3-purple-200/50 after:group-hover:border-r-t3-purple-200/75 dark:after:border-r-t3-purple-200/20 dark:after:group-hover:border-r-t3-purple-200/50",
        !isRtl &&
          "after:right-[calc(-0.5em-1px)] after:border-r-0 after:border-l-t3-purple-200/50 after:group-hover:border-l-t3-purple-200/75 dark:after:border-l-t3-purple-200/20 dark:after:group-hover:border-l-t3-purple-200/50",
      ],
    ]}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 576 512"
      class="h-4 w-4 fill-slate-900 transition-colors duration-300 [margin-inline-end:4px] dark:fill-t3-purple-100"
    >
      <path
        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
      ></path>
    </svg>
    {formattedStars}
  </div>
  <svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    id="github-icon"
    class="h-10 w-10 fill-slate-900 py-1 transition-colors duration-300 dark:fill-t3-purple-100"
    ><title>GitHub</title><path
      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
    ></path>
  </svg>
</a>

<style>
  #github-link:hover {
    text-decoration: none !important;
  }
</style>
